<!DOCTYPE html>
<html>
<link rel="match" href="../expected/border-radius-normalization-ref.html" />
<head>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
      font-family: sans-serif;
    }

    .test-case {
      margin: 15px 0;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .label {
      width: 200px;
      font-size: 14px;
      color: #333;
    }

    .box {
      background-color: #4CAF50;
      border: 2px solid #333;
    }

    /* Float max precision test - tests extreme border radius values */
    .float-max-precision {
      width: 300px;
      height: 40px;
      border-radius: 3.40282e+38px; /* Float max values trigger precision issues */
      background-color: #4CAF50;
      border: 1px solid #333;
    }

    h2 {
      font-size: 18px;
      margin-bottom: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <h2>Border Radius Normalization Test</h2>

  <div class="test-case">
    <div class="label">Float max precision test:</div>
    <div class="float-max-precision"></div>
  </div>
</body>
</html>